<template>
	<view class="authenticationCard">
		<view class="authenticationBox border">
			<view class="nickname">
				姓名
			</view>
			<input type="text" value="" placeholder="请输入真实名字" class="input" v-model="inputNickname" />
		</view>
		<view class="authenticationBox border">
			<view class="cardID">
				身份证号
			</view>
			<input type="text" value="" placeholder="请输入身份证号" class="input" v-model="inputCard" />
		</view>
		<view class="upload">
			点击上传手持身份证正面照
			<view class="marginTop" @click="uploadBtn">
				<view class="uploadBox" v-if="picShow">
					<image src="../../static/img/287c3eba2b68e867e12bf96be46366a.png" mode=""></image>
				</view>
				<image :src="activeSrc" mode="" v-else class="pic"></image>
			</view>
		</view>
		<view class="sureBtn" @click="sureBtn">
			确定
		</view>
	</view>
</template>

<script>
	import {
		url
	} from '@/utils/api.js'
	export default {

		data() {
			return {
				inputNickname: '',
				inputCard: '',
				activeSrc:'',
				picShow:true,
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数

		},
		methods: {
			uploadBtn(){
				this.headImage()
			},
			headImage(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: url+'/image/upload', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								this.picShow=false
								this.activeSrc =JSON.parse(uploadFileRes.data).url
				            }
				        });
				    }
				});
			},
			sureBtn() {
				if (this.inputNickname == '') {
					uni.showToast({
						title: '请输入真实名字',
						duration: 1000,
						icon: 'none'
					});
					return
				}else if(this.inputCard ==''){
					uni.showToast({
						title: '请输入身份证号',
						duration: 1000,
						icon: 'none'
					});
					return
				}else {
					let data={
						real_name:this.inputNickname,
						id_card:this.inputCard,
						image:this.activeSrc
					}
					this.$u.post('/certify', data).then(res => {
							if (res) {
								console.log(res,'res')
								uni.navigateTo({
									url:'./finish?rink='+res.message
								})
							}
						})
						.catch((res) => {
							console.log(res.message)
						})
				}
			}
		}
	}
</script>

<style>
	.authenticationCard {
		background-color: #FFFFFF;
	}

	.authenticationBox {
		padding: 33rpx;
		box-sizing: border-box;
	}

	.nickname,
	.cardID {
		font-size: 32rpx;
		color: rgba(34, 34, 34, 1);
		line-height: 48rpx;
		padding: 40rpx 0;
	}

	.input {
		color: #666666;

	}

	.border {
		border-bottom: 1rpx solid #F5F5F5;
	}

	.upload {
		padding: 33rpx;
	}
.marginTop{
	margin-top: 50rpx;
	}
	.uploadBox {
		width: 220rpx;
		height: 220rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx dashed rgba(203, 180, 254, 1);
		border-radius: 6rpx;
	}

	.uploadBox image {
		width: 60rpx;
		height: 46rpx;
		margin-top: 50%;
		margin-left: 50%;
		transform: translate(-50%, -50%);
		display: block;
	}

	.sureBtn {
		width: 544rpx;
		height: 98rpx;
		background: rgba(122, 42, 255, 1);
		border-radius: 49rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 98rpx;
		margin:  auto;
	}
	.pic{
		width:220rpx;
		height:220rpx;
		border-radius:6rpx;
	}
</style>
